<template>

  <div class="app-container calendar-list-container">
    <!--签到方式-->
    <div class="filter-container" scope="scope">
      <el-button class="filter-item"  type="primary"  @click="confirm_phone()">手机号</el-button>

      <el-button class="filter-item"  type="primary"  @click="confirm_dialog()">扫描二维码</el-button>
    <!--搜索框-->
      <el-input
        icon="search"
        :on-icon-click="searchTable"
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入关键字"
        v-model="query.keyword"
      >
      </el-input>
    </div>
    <!--会员签到记录表单-->
    <el-table v-loading="listLoading" :data="tableData" stripe style="width: 100%">
     <!-- <el-table-column prop="subject.data.id" label="会员号" ></el-table-column>-->
      <el-table-column prop="card.data.name" label="姓名" ></el-table-column>
      <el-table-column prop="card.data.sex" label="性别" ></el-table-column>
      <el-table-column prop="card.data.card_type" label="卡种" >
        <template scope="scope">
          {{card_type[scope.row.card.data.card_type]}}
        </template>
      </el-table-column>
      <el-table-column prop="card.data.mobile" label="联系电话" ></el-table-column>
      <el-table-column prop="signed_at" label="签到时间" ></el-table-column>
    </el-table>

   <!--分页-->
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pagination.current_page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pagination.per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.pagination.total"
      >
      </el-pagination>
    </div>

    <!--点击扫码成功登录的弹框确认信息-->
    <el-dialog class="customer" :visible.sync="dialogVisible" size="large"  @close="closePhoneDialog" @getfocuns="getfocuns">
      <check-info @checkInfoReloadList="checkInfoReloadList"  ref="checkPhone" :dialogVisible="dialogVisible"></check-info>
    </el-dialog>
    <el-dialog class="customer" size="large"  :visible.sync="codeVisible" @close="closePhoneDialog" @getfocuns="getfocuns">
      <qrcode-info @checkInfoReloadList="checkInfoReloadList"  ref="checkPhone" :codeVisible="codeVisible"></qrcode-info>
    </el-dialog>

  </div>
</template>

<script>
  import { GetTable } from '@/api/sign';
  import checkInfo from './checkInfo'
  import noFound from './noFound'
  import blank from './blank'
  import qrcodeInfo from './qrcodeInfo'

  export default {
    components: {
      checkInfo,
      noFound,
      blank,
      qrcodeInfo
    },
    data() {
      return {
        card_type: {
          times: '次卡',
          date: '时间卡',
          clock: '时段卡'
        },
        open: false,
        tableData: [],
        checkId: null,
        listLoading: true,
        query: {
          pagination: {
            total: 0,
            page: 1,
            per_page: 10
          },
          keyword: ''
        },
        dialogFormVisible: false,
        dialogVisible: false,
        codeVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '客户信息'
        },
        dialogPvVisible: false
      }
    },
    created() {
      this.searchTable();
    },
    methods: {
      // 分页
      handleSizeChange(val) {
        this.query.pagination.per_page = val;
        this.searchTable();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.query.pagination.current_page = val;
        this.searchTable();
        console.log(`当前页: ${val}`);
      },
      // 获取列表
      searchTable() {
        this.listLoading = true;
        GetTable(this.query.pagination.current_page, this.query.pagination.per_page, this.query.keyword).then((res) => {
          console.log(res)
          this.listLoading = false;
          this.tableData = res.data
        //  console.log(this.tableData, 'dd')
       //   console.log(res.data[0].subject.data)
          this.query.pagination = res.meta.pagination;
        })
      },
      confirm_phone() {
       /* this.$router.push({ path: '/chechinfo' });*/
        this.dialogVisible = true
        this.open = true
      },
      confirm_dialog() {
        this.codeVisible = true
        this.open = true
      },
      checkInfoReloadList() {
     //   this.dialogVisible = false
        this.searchTable();
      },
      closePhoneDialog() {
      //  console.log('调用关闭方法1')
        this.$refs.checkPhone.closeClean(); //父组件调子组件方法
      //  console.log('关闭清除1')
      },
      getfocuns(){
        this.$refs.checkPhone.getfocuns();
      }
    }
  }
</script>
<style scoped>
  .filter-item{
    margin-left: 10px;
  }
  .el-form-item{
    margin-bottom: 5px;
  }
  .photo{
    background-color: #8d8d8d;
    width: 106px;
    height: 132px;
    margin-right: 30px;
  }
  .cus_container{
    display: -webkit-flex;
    justify-content: space-between;
  }
  .dialog-footer{
    width: 196px;
    height: 38px;
    background-color: white;
    color: #41c26b;
    border-radius: 10px;
    text-align: center;
    border: solid 2px #41c26b;
  }
  .footer{
    margin-top: 20px;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
  }
  .address_item{
    justify-content: space-between;
  }
  .addresss{
    margin-left: 10px;
  }
  .el-cascader{
    width: 200px;
  }
  .info_top{
    display: -webkit-flex;
    justify-content: space-around;
    margin-bottom: 20px;
  }
  .customer{
    width: 800px;
    margin: 0 auto;
  }
  #sign_btn{
    width: 100%;
    bottom: 0;
    margin: 0 auto;
    margin-top: 25px;
  }
  .infomation{
    display: -webkit-flex;
    justify-content: space-around;
  }
  .info_type{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .info_footer{
    display: -webkit-flex;
    justify-content: space-around;
  }
  .info_date .info_time{
    display: inline-block;
  }
  .info_right{
    line-height: 27px;
  }
  .more{
    margin-top: 10px;
    text-align: left;
  }

</style>
